<template>
  <h3>模板指令三：v-show & v-if & v-model</h3>
  <!-- 
    v-show 指令：控制显示或隐藏，false时，代码依然存在
    v-if 指令：控制显示或隐藏，false时，代码不存在
  -->
  <div>
    <p v-show="isShowP">
      v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display
      值。当条件改变时，也会触发过渡效果。
    </p>

    <p v-if="isShowP">
      当 v-if
      元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
      场景：需要重新出发dom树渲染的时候
    </p>

    <button type="button" @click="() => (isShowP = !isShowP)">控制显示和隐藏</button>
  </div>

  <hr />
  <h3>v-if & v-else & v-else-if</h3>
  <div>
    <p @click="shiNum = 2" v-if="shiNum == 1">独立寒秋，湘江北去，橘子洲头。</p>
    <p @click="shiNum = 1" v-else>看万山红遍，层林尽染；漫江碧透，百舸争流。</p>
    <p>鹰击长空，鱼翔浅底，万类霜天竞自由。怅寥廓，问苍茫大地，谁主沉浮？</p>
    <hr />
    <p v-if="shiNum == 1">床前明月光</p>
    <p @click="shiNum = 3" v-else-if="shiNum == 2">疑是地上霜举头望明月</p>
    <p v-else>低头思故乡</p>
  </div>
  
  <hr />
  <h3>v-for</h3>
  <div class="content">
    <ul>
      <li v-for="item in `abcdefa`" :key="item">{{ item }}</li>
    </ul>
    <hr />
    <ul>
      <li v-for="item in 10" :key="item">{{ item }}</li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, key, index) in ['床前明月光', '疑是地上霜', '举头望明月', '低头吃月饼']" :key="item">
        {{ `item:${item} - key:${key}- index:${index}` }}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, key) in {
        a: '床前明月光',
        b: '疑是地上霜',
        c: '举头望明月',
        d: '低头吃月饼'
      }" :key="item">
        {{ `item:${item} - key:${key}` }}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, key, index) in {
        a: '床前明月光',
        b: '疑是地上霜',
        c: '举头望明月',
        d: '低头吃月饼'
      }" :key="item">
        {{ `item:${item} - key:${key}- index:${index}` }}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, key) in mySet" :key="key">
        {{ item }}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, key) in myMap" :key="key">
        {{ `${item} - ${item[0]} - ${item[1]}` }}
      </li>
    </ul>
  </div>

  <hr />
  <h3>v-model</h3>
  <div>
    <div class="content">
      <p>
        inputVal: {{ inputVal }}
        <span style="color: red">
          eg:inputVal是状态变量，只要inputVal被修改，就会渲染这部分ui的更新
        </span>
      </p>
    </div>
    <!-- <input type="text" v-model="inputVal" name="username" id="" /> -->
    <input type="text" :value="inputVal" @input="(e) => {
        // 获取input每次修改后的值打印输出
        console.log((e.target as HTMLInputElement).value)
        // 把获取到的 Input 的 value 赋值给 状态变量 inputVal
        inputVal = (e.target as HTMLInputElement).value
      }
      " />
    <button type="button" @click="inputVal = '修改后的inputVal'">修改 inputVal</button>
  </div>

</template>

<script lang="ts">
export default {
  name: 'Study2StuDemo3'
}
</script>

<script setup lang='ts'>
import { ref } from 'vue'

const isShowP = ref(true)

const shiNum = ref(1)

let mySet = new Set()
mySet.add('apple')
mySet.add('banana')
mySet.add('orange')
mySet.add('apple')
console.log(mySet)

let myMap = new Map()
myMap.set('apple', 2)
myMap.set('banana', 3)
myMap.set('orange', 5)
console.log(myMap);

const inputVal = ref('default')

</script>

<style scoped>
p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>